<!--
 * @Author: Freude Xu
 * @Date: 2021-09-22 11:17:22
 * @LastEditors: Freude Xu
 * @LastEditTime: 2021-09-22 14:01:33
 * @Description: 仪表盘
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入g2-plot的资源（在线引入或者本地引入都可以，方法与jquery引入的方法差不多） -->
    <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
</head>

<body>
    <div id="container"></div>
    <script>
        let Gauge = G2Plot.Gauge;
        var gauge = new Gauge('container', {
            percent: 0.75,
            type: 'meter',
            innerRadius: 0.75,
            range: {
                ticks: [0, 1 / 3, 2 / 3, 1],
                color: ['#F4664A', '#FAAD14', '#30BF78'],
            },
            indicator: {
                pointer: {
                    style: {
                        stroke: '#D0D0D0',
                    },
                },
                pin: {
                    style: {
                        stroke: '#D0D0D0',
                    },
                },
            },
            statistic: {
                content: {
                    style: {
                        fontSize: '36px',
                        lineHeight: '36px',
                    },
                },
            },
        });
        gauge.render();
        let data = 0;
        const interval = setInterval(() => {
            if (data >= 0.95) {
                clearInterval(interval);
            }
            data += 0.005;
            gauge.changeData(data > 1 ? data - 1 : data);
        }, 100);
    </script>
</body>

</html>